<template>
 <el-form ref="formRef" :model="dynamicValidateForm" class="inputparamter-dynamic">
    <el-row>
      <el-col :span="4">
        <el-form-item key="name" label="字段名称"/>
      </el-col>
      <el-col :span="4">
        <el-form-item key="type" label="字段类型"/>
      </el-col>
      <el-col :span="4">
        <el-form-item key="optional" label="可选项"/>
      </el-col>
      <el-col :span="12">
        <el-form-item key="classpath" label="类路径"/>
      </el-col>
    </el-row>
    <el-row :key='"paramter"+index' v-for="(paramter, index) in dynamicValidateForm.paramters" >
      <el-col :span="4">
        <el-form-item key="name">
          <el-input v-model="paramter.name" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item key="type">
          <el-input v-model="paramter.type" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item key="optional">
          <el-input v-model="paramter.optional" />
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item key="classpath">
          <el-input v-model="paramter.classpath" />
        </el-form-item>
      </el-col>
      <el-col :span="2">
        <el-form-item key="delete">
          <el-button class="mt-2" @click.prevent="removeParamter(paramter)">Delete</el-button>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item>
      <el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
      <el-button @click="addParamter">New paramter</el-button>
      <el-button @click="resetForm(formRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>



<script lang="ts" setup>
import { reactive, ref, onBeforeUpdate, onMounted } from 'vue'
import type { FormInstance } from 'element-plus'

const formRef = ref<FormInstance>()
const dynamicValidateForm = reactive<{
  paramters: ParamterItem[]
}>({
  paramters: [
    {
      name: '',
      type: '',
      optional:'',
      classpath:'',
    },
  ],
})

interface Props {
  inputparamMap: Map<String, Object>;
}

const props = withDefaults(defineProps<Props>(), {
  inputparamMap: new Map([["inputparam", {}],]),
});


interface ParamterItem {
  name: string
  type: string
  optional: string
  classpath: string
}

function prop2param(parameter) {
  dynamicValidateForm.paramters.push(
    {
      name: parameter['name'],
      type: parameter['type'],
      optional:parameter['optional'].toString(),
      classpath:parameter['classpath'],
    });

    if (parameter['parameter'] != undefined) {
      for (const parameteritem of parameter['parameter']){
        prop2param(parameteritem)
      }
      
    }
}


onMounted(() => {
  const inputparam = props.inputparamMap.get("inputparam")
  console.log(inputparam)
  dynamicValidateForm.paramters = []
  if (inputparam != undefined && inputparam['parameter'] != undefined) {
    prop2param(inputparam['parameter'])
  }
  
})

onBeforeUpdate(() => {
  const inputparam = props.inputparamMap.get("inputparam")
  console.log(inputparam)
  dynamicValidateForm.paramters = []
  if (inputparam != undefined && inputparam['parameter'] != undefined) {
    prop2param(inputparam['parameter'])
  }
})

const removeParamter = (item: ParamterItem) => {
  const index = dynamicValidateForm.paramters.indexOf(item)
  if (index !== -1) {
    dynamicValidateForm.paramters.splice(index, 1)
  }
}

const addParamter = () => {
  dynamicValidateForm.paramters.push({
      name: '',
      type: '',
      optional:'',
      classpath:'',
  })
}

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>

<style scoped>
.el-form-item{
    margin-bottom: 1.5px;
}
</style>